import React from 'react';
import {
  ActionType,
  ProColumns,
  FooterToolbar,
  PageContainer,
  ProTable,
} from '@ant-design/pro-components';
import { Image } from 'antd';

const columns: any = [
  {
    title: '时间',
    dataIndex: 'time',
  },
  {
    title: '车牌',
    dataIndex: 'licensePlate',
  },
  {
    title: '车速',
    dataIndex: 'speed',
  },
  {
    title: '是否超速',
    dataIndex: 'isSpeeding',
    valueEnum: {
      true: { text: '是', status: 'Error' },
      false: { text: '否', status: 'Success' },
    },
  },
  {
    title: '抓拍照片',
    dataIndex: 'photo',
    render: (text: string | undefined) => <Image preview src={text} alt="抓拍照片" style={{ maxWidth: '100px' }} />,
  },
];

const data = [
  {
    key: '1',
    time: '2023-11-02 14:30:45',
    licensePlate: '粤B12345',
    speed: '80 km/h',
    isSpeeding: false,
    photo: 'https://d00.paixin.com/thumbs/1000135/39364643/staff_1024.jpg',
  },
  {
    key: '2',
    time: '2023-11-02 15:15:20',
    licensePlate: '粤C67890',
    speed: '110 km/h',
    isSpeeding: true,
    photo: 'https://d00.paixin.com/thumbs/1000135/39364643/staff_1024.jpg',
  },
];

const SpeedViolationList: React.FC = () => {
  return (
    <PageContainer>
      <ProTable
        headerTitle="违章记录列表"
        columns={columns}
        dataSource={data}
        rowKey="key"
        search={false}
        toolBarRender={false}
        pagination={false}
      />
    </PageContainer>
  );
};

export default SpeedViolationList;
